<!DOCTYPE html>
<%@ include file="../base.jsp"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
        <link href="images/favicon.ico" mce_href="images/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <title>请输入您的加油密码</title>
        <%@ include file="../js.jsp"%>
    </head>
    <body ontouchstart>
        <div class="page padding-b-0">
        	<form action="${ctx}/scanRefueling/verifyAuth" id="password_form" method="post">
        		<input type="hidden" id="fpId" name="fpId" value="${authVO.fpId}" />
        		<input type="hidden" id="stationId" name="stationId" value="${authVO.stationId}" />
        		<input type="hidden" id="memberId" name="memberId" value="${authVO.memberId}" />
        		<input type="hidden" id="memberName" name="memberName" value="${authVO.memberName}" />
        		<input type="hidden" id="memberFrozenAmount" name="memberFrozenAmount" value="${authVO.memberFrozenAmount}" />
        		<input type="hidden" id="password" name="password" />
	            <div class="bd text-center">
	                <h3 class="text-center text-blue margin-t-20">请输入您的加油密码</h3>
	            </div>
	            <div class="bd">
	                <div class="lock-screen-pwd">
	                    <div id="pwd-1"  class="pwd"></div>
	                    <div id="pwd-2"  class="pwd"></div>
	                    <div id="pwd-3"  class="pwd"></div>
	                    <div id="pwd-4"  class="pwd"></div>
	                    <div id="pwd-5"  class="pwd"></div>
	                    <div id="pwd-6"  class="pwd"></div>
	                </div>
	                <div class="lock-screen-keyboard key-border-top key-border-bottom">
	                    <div class="key key-border-bottom">1</div>
	                    <div class="key key-border-bottom">2</div>
	                    <div class="key key-border-bottom">3</div>
	                    <div class="key key-border-bottom">4</div>
	                    <div class="key key-border-bottom">5</div>
	                    <div class="key key-border-bottom">6</div>
	                    <div class="key key-border-bottom">7</div>
	                    <div class="key key-border-bottom">8</div>
	                    <div class="key key-border-bottom">9</div>
	                    <div class="key key-reverse"></div>
	                    <div class="key">0</div>
	                    <div class="key-reverse">x</div>
	                    <div class="key-line-1"></div>
	                    <div class="key-line-2"></div>
	                </div>
	            </div>
	            <%@ include file="../bottom.jsp"%>
            </form>
        </div>
    </body>
    <script>
    $(function () {
        var pwd = ''; // Password
        var len = 0;

        // Input
        $('.key').click(function() {
            if (len === 5) {
            	len++;
            	 $('#pwd-' + len).addClass('pwd-full');
            	pwd = pwd.concat($(this).html());
                $('.pwd-container').addClass('wobble-horizontal');
                setTimeout(function(){
                  $('.pwd-container').removeClass('wobble-horizontal');
                }, 2000);
                $("#password").val(pwd);
    			$("#password_form").submit();
            } else {
                // The effect when the password is incorrect
                pwd = pwd.concat($(this).html());
                len++;
                $('#pwd-' + len).addClass('pwd-full');

                // TODO: redirect to another page when the password is correct
            }
        });

        // Delete
        $('.key-reverse').click(function() {
            if (len === 0) {
                $('.pwd-container').addClass('wobble-horizontal');
                setTimeout(function(){
                  $('.pwd-container').removeClass('wobble-horizontal');
                }, 2000);
            } else {
                // The effect when the password area is empty
                pwd = pwd.slice(0, -1);
                $('#pwd-' + len).removeClass('pwd-full');
                len--;
            }
        });
    });
    </script>
</html>